<script setup lang="ts">
import { ElTableColumn } from 'element-plus'
import type { ApplicationModelIndicator } from '@/types/modules/application-models'
import StorageModeCell from '@/views/StatisticalIndicators/components/StorageModeCell.vue'

defineProps<{
  loading: boolean
  data: ApplicationModelIndicator[]
}>()

const selection = defineModel<ApplicationModelIndicator[]>({
  required: true,
})
</script>

<template>
  <ElTable
    v-loading="loading"
    element-loading-custom-class="global-loading"
    :data="data"
    height="100%"
    @selection-change="(val: any) => (selection = val)"
  >
    <template #empty>
      <TableEmpty
        class="indicator-empty"
        :image-size="60"
      />
    </template>
    <ElTableColumn
      type="selection"
      fixed
      :width="30"
    />
    <ElTableColumn
      label="指标名称"
      prop="indicatorName"
      :width="200"
      fixed
    />
    <ElTableColumn label="存储周期" :width="260">
      <template #default="{ row }">
        <StorageModeCell
          v-if="row.storageMode"
          :mode="row.storageMode"
        />
        <span v-else>-</span>
      </template>
    </ElTableColumn>
    <ElTableColumn
      label="所属用能单元"
      prop="pointFullName"
      :width="250"
    />
    <ElTableColumn
      label="测点点位号"
      prop="indicatorCode"
      :width="150"
    />
    <ElTableColumn
      label="单位"
      prop="unit"
      :width="150"
    />
  </ElTable>
</template>

<style scoped>
:deep(.indicator-empty) {
  --el-empty-image-width: 60px;
  line-height: 1.5;
}
</style>
